<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{width:100px;height: 100px;border: solid 1px black;}
    .msg{background: red;}
  </style>
</head>
<body>
  <input type="button" class="btn" value="按钮">
  <div class="box abc msg" style="width: 200px;">
    <em>倾斜的文字</em>
  </div>
</body>
<script>
  var box = document.querySelector(".box");
  console.log(box);
  
  // ========
  
  // console.log(box.classList)
  // // 添加class
  // box.classList.add("cont")
  // // 删除现有class
  // box.classList.remove("abc")

  // var btn = document.querySelector(".btn");
  // btn.onclick = function(){
  //   // 切换class
  //   box.classList.toggle("msg")
  // }

  // =========


  // 非表单元素内容操作
    
  // 能解析html标签，可获取可设置
  // console.log(box.innerHTML);
  // box.innerHTML = "<b>加粗的文字</b>"
  
  // 不能解析html标签，可获取可设置
  // console.log(box.innerText);
  // box.innerText = "<b>加粗的文字</b>"

  // 表单元素内容操作

  // 可获取可设置
  // console.log( ipt.value )
  // ipt.value = "hello"


  // =========

  // 元素.style：只能控制行内样式

  // console.log(box.style.width)

  // box.style.height = "200px"

  // box.style.cssText = "width:500px;height:40px;font-size:30px;";

  
  
  

</script>
</html>